<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->

  <title>layabox</title>
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./assets/css/animate.min.css" />
  <link rel="stylesheet" href="./assets/css/reset.css" />
  <link rel="stylesheet" href="./assets/css/header.css" />
  <link rel="stylesheet" href="./assets/css/index.css" />
  <link rel="stylesheet" href="./assets/css/footer.css">
</head>

<body>
  <!-- 头部 -->
  <header class="header">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid  wow fadeIn">
        <!-- 移动端导航 -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo" href="javascript:void(0)">
            <img src="./assets/images/logo.png" />
          </a>
        </div>

        <!-- 导航条 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <!-- 导航内容 -->
          <ul class="menu nav navbar-nav">
            <li class="active"><a href="#"  data-lang="menu1">首页</a></li>
            <li><a href="#list1" data-lang="menu2" data-url="list1">Laya引擎</a></li>
            <li><a href="#list2" data-lang="menu3" data-url="list2">Laya优势</a></li>
            <li><a href="#list3" data-lang="menu4" data-url="list3">Laya产品</a></li>
            <li><a href="#list4" data-lang="menu5" data-url="list4">Laya中心</a></li>
            <li><a href="#list5" data-lang="menu6" data-url="list5">合作伙伴</a></li>
          </ul>

          <!-- 切换语言 -->
          <ul class="language nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">
                Language <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a onclick="SelectLang('zh')" href="javascript:void(0)">中文</a></li>
                <li><a onclick="SelectLang('en')" href="javascript:void(0)">English</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <!-- 轮播图 -->
  <div id="carousel-example-generic" class="carousel banner slide wow bounceIn" data-wow-delay="200ms" data-ride="carousel">
    <!-- 点 -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- 图片部分 -->
    <div class="carousel-inner banner_img" role="listbox">
      <div class="item active">
        <img class="img-responsive" src="./assets/images/banner1.png" width="100%" />
      </div>
      <div class="item">
        <img class="img-responsive" src="./assets/images/banner2.png" width="100%" />
      </div>
      <div class="item">
        <img class="img-responsive" src="./assets/images/banner3.png" width="100%" />
      </div>
    </div>

    <!-- 左右按钮 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">左边</span>
    </a>

    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">右边</span>
    </a>
  </div>
  <!-- Laya引擎 -->
  <div class="list1" id="list1">
    <div class="container list1_box">
      <div class="col-md-8">
        <p class="h1 title1 wow fadeInLeft" data-wow-delay="100ms" data-lang="menu7">LayaFlash 引擎</p>
        <p class="title2 wow fadeInLeft" data-wow-delay="300ms" data-lang="menu8">让Flash技术变成开发HTML5产品的利器</p>
        <ul class="listul">
          <li class="col-md-6 wow bounceIn" data-wow-delay="300ms">
            <div class="left col-md-3">
              <img src="./assets/images/main1_03.png" />
            </div>
            <div class="right col-md-9">
              <p data-lang="menu9">快速Flash产品转换</p>
              <p data-lang="menu10">Flash页游\手游仅需1个人7天即可
                转换为HTML5和APP游戏</p>
            </div>
          </li>
          <li class="col-md-6 wow bounceIn" data-wow-delay="600ms">
            <div class="left col-md-3">
              <img src="./assets/images/main1_05.png" />
            </div>
            <div class="right col-md-9">
              <p>LayaFlash IDE</p>
              <p data-lang="menu11">支持代码编译、调试、压缩与混淆
                加密、资源转换、在线文档等功能</p>
            </div>
          </li>
          <li class="col-md-6 wow bounceIn" data-wow-delay="700ms">
            <div class="left col-md-3">
              <img src="./assets/images/main1_09.png" />
            </div>
            <div class="right col-md-9">
              <p data-lang="menu12">HTML5零学习成本</p>
              <p data-lang="menu13">AS3开发者可直接使用Flash开源框
                架和工具链进行开发HTML5</p>
            </div>
          </li>
          <li class="col-md-6 wow bounceIn" data-wow-delay="800ms">
            <div class="left col-md-3">
              <img src="./assets/images/main1_10.png" />
            </div>
            <div class="right col-md-9">
              <p data-lang="menu14">性能媲美APP</p>
              <p data-lang="menu15">LayaFlash引擎的重度游戏已运行于
                QQ空间等平台，性能媲美APP</p>
          </li>
        </ul>
      </div>
      <div class="col-md-3">
        <div class="col-md-3 images ">
          <img src="./assets/images/main1_rig_03.png">
        </div>
      </div>
    </div>
  </div>

  <!-- 优势 -->
  <div class="list2" id="list2">
    <div class="container">
      <div class="newbox">
        <div class="col-md-3 images1 wow fadeInLeft" data-wow-delay="200ms">
          <img src="./assets/images/newimg.png">
        </div>
        <div class="col-md-6 content wow fadeInRight" data-wow-delay="600ms">
          <div class="title" data-lang="menu16">Layabox 优势</div>
          <ul class="list">
            <li class="item wow fadeInLeft"  data-wow-delay="200ms">
              <div class="left">
                <img src="./assets/images/newicon1.png" />
              </div>
              <div class="right" data-lang="menu17">
                快速上手，Flash程序员3小时掌握HTML5开发
              </div>
            </li>
            <li class="item wow fadeInLeft" data-wow-delay="400ms">
              <div class="left">
                <img src="./assets/images/icon_img2.png" />
              </div>
              <div class="right" data-lang="menu18">
                4年优化打磨，LayaPlayer运行器性能媲美APP
              </div>

            </li>
            <li class="item wow fadeInLeft" data-wow-delay="600ms">
              <div class="left">
                <img src="./assets/images/icon_img3.png" />
              </div>
              <div class="right" data-lang="menu19">
                超5亿的LayaPlayer移动设备安装量帮助CP发行
              </div>
            </li>
            <li class="item wow fadeInLeft" data-wow-delay="800ms">
              <div class="left">
                <img src="./assets/images/icon_img4.png" />
              </div>
              <div class="right" data-lang="menu20">
                使用LayaFlash开发大型HTML5游戏的企业超100家
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 产品家族 -->
  <div class="list3" id="list3">
    <div class="container list3box">
      <!-- 标题 -->
      <p class="h1 text-center list3_title  wow fadeInDown" data-lang="menu21">Layabox产品家族</p>
      <div class=" list3_house">
        <div class="col-md-6 list3_sublist wow fadeInLeft" data-wow-delay="500ms">
          <div class="item_img col-md-3 col-md-3">
            <img src="assets/images/icon_images1.png" />
          </div>
          <!--文字-->
          <div class="list3_sublist_text col-md-9">
            <p class="h3">LayaAir</p>
            <p class="h5" data-lang="menu22">核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，
              支持2D\3D，非运行器模式下性能媲美APP。</p>
          </div>
        </div>
        <div class="col-md-6 list3_sublist wow fadeInRight" data-wow-delay="500ms">
          <div class="item_img col-md-3">
            <img src="assets/images/icon_images2.png" />
          </div>
          <!--文字-->
          <div class="list3_sublist_text col-md-9">
            <p class="h3">LayaPublish</p>
            <p class="h5" data-lang="menu23">Layabox发行业务，通过在H5产业链中的技术
              桥梁优势，帮助CP获得流量支持。</p>
          </div>
        </div>
        <div class="col-md-6 list3_sublist wow fadeInRight" data-wow-delay="600ms">
          <div class="item_img col-md-3">
            <img src="assets/images/icon_images3.png" />
          </div>
          <!--文字-->
          <div class="list3_sublist_text col-md-9">
            <p class="h3">LayaFlash</p>
            <p class="h5" data-lang="menu24">使用Flash AS3语言开发H5的引擎框架，可直
              接在FB或FD中开发、调试、编译H5，也可快
              速将Flash页游\手游转换成H5游戏。</p>
          </div>
        </div>
        <div class="col-md-6 list3_sublist wow fadeInLeft" data-wow-delay="600ms">
          <div class="item_img col-md-3">
            <img src="assets/images/icon_images4.png" />
          </div>
          <!--文字-->
          <div class="list3_sublist_text col-md-9">
            <p class="h3">LayaStore</p>
            <p class="h5" data-lang="menu25">嵌入式HTML5商城，APP只需嵌入20K的SDK
              即可以获得托管式HTML5商店服务，进入流量
              获利新时代。</p>
          </div>
        </div>
        <div class="col-md-6 list3_sublist wow  fadeInUp" data-wow-delay="700ms">
          <div class="item_img col-md-3">
            <img src="assets/images/icon_images5.png" />
          </div>
          <!--文字-->
          <div class="list3_sublist_text col-md-9">
            <p class="h3">LayaPlayer</p>
            <p class="h5" data-lang="menu26">HTML5高速运行器，性能卓越、支持大型
              HTML5游戏流畅运行，目前已植入QQ、百度
              等20多家主流平台，安装量超5亿。</p>
          </div>
        </div>
        <div class="col-md-6 list3_sublist wow  fadeInUp" data-wow-delay="700ms">
          <div class="item_img col-md-3">
            <img src="assets/images/icon_images6.png" />
          </div>
          <!--文字-->
          <div class="list3_sublist_text col-md-9">
            <p class="h3">LayaOpen</p>
            <p class="h5" data-lang="menu27">Layabox开放平台，整合了Laya提供的各项运
              营，管理服务的服务，提供给游戏提供商和互
              联网渠道的统一开放平台。</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  </div>
  <!-- 游戏 -->
  <div class="list4" id="list4">
    <div class="container list4_box">
      <div class=" layabox_title  wow fadeInDown">
        
        <div class="h1 col-md-12">
          <p class="h1" style="float: left;"data-lang="menu29">采用Layabox引擎的精彩游戏</p>
            <a href="javascript:;" style="float: right;" class="text-right col-md-2">
          <p class="h3" data-lang="menu28">更多</p>
        </a>  </div>
        
      </div>
      <div class="sublis4">
        <!-- 视频 -->
        <div class="col-sm-4 videobox wow fadeInRight">
          <img id="videoimg" src="./assets/images/videoimg.png" alt="">
          <video id="video" class="video" controls="" ref="video" playsinline="true" x-webkit-airplay="true"
            x5-playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" width="100%" controls
            :poster="detail.pictureUrl" controlslist="nofullscreen nodownload noremoteplayback"
            src="./assets/video/bsm.mp4" title="点击播放视频">
          </video>
        </div>
        <!--游戏 icon -->
        <div class="col-sm-8 gameico">
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="300ms"><img src="./assets/images/table17.jpg"
              alt="">
            <p class="" data-lang="menu30">猎刃2</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="350ms"><img src="./assets/images/table18.jpg"
              alt="">
            <p data-lang="menu31">上吧主公</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="400ms"><img src="./assets/images/table19.jpg"
              alt="">
            <p data-lang="menu32">醉西游</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="450ms"><img src="./assets/images/table20.jpg"
              alt="">
            <p data-lang="menu33">魔卡幻想</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="500ms"><img src="./assets/images/table21.jpg"
              alt="">
            <p data-lang="menu34">站能战队</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="550ms"><img src="./assets/images/table22.jpg"
              alt="">
            <p data-lang="menu35">刀塔大萝卜</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="600ms"><img src="./assets/images/table23.jpg"
              alt="">
            <p data-lang="menu36">轰三国</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="650ms"><img src="./assets/images/table24.jpg"
              alt="">
            <p data-lang="menu37">迷你猎人</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="700ms"><img src="./assets/images/table25.jpg"
              alt="">
            <p data-lang="menu38">萌挂三国</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="750ms"><img src="./assets/images/table26.jpg"
              alt="">
            <p data-lang="menu39">夺塔三国</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="800ms"><img src="./assets/images/table27.jpg"
              alt="">
            <p data-lang="menu40">英雄争霸</p>
          </a>
          <a href="#" class="col-md-2 wow fadeInDown" data-wow-delay="850ms"><img src="./assets/images/table28.jpg"
              alt="">
            <p data-lang="menu41">战争之门</p>
          </a>

        </div>
      </div>
    </div>
  </div>
  <!-- 合作伙伴 -->
  <div class="list5" id="list5">
    <div class="container list5_box ">
      <div class="list5_title wow fadeInUp">
        <p class="h1" data-lang="menu42">合作伙伴</p>
        <p class="h5" data-lang="menu43">(排序不分前后)</p>
      </div>




      <div class=" ico_div wow fadeInUp" data-wow-delay="200ms">
        <a href="#"><img src="assets/images/table29.jpg" /></a>
        <a href="#"><img src="assets/images/table30.jpg" /></a>
        <a href="#"><img src="assets/images/table31.jpg" /></a>
        <a href="#"><img src="assets/images/table32.jpg" /></a>
        <a href="#"><img src="assets/images/table33.jpg" /></a>
        <a href="#"><img src="assets/images/table34.jpg" /></a>
      </div>
      <div class=" ico_div wow fadeInUp" data-wow-delay="400ms">
        <a href="#"><img src="assets/images/table35.jpg" /></a>
        <a href="#"><img src="assets/images/table36.jpg" /></a>
        <a href="#"><img src="assets/images/table37.jpg" /></a>
        <a href="#"><img src="assets/images/table38.jpg" /></a>
        <a href="#"><img src="assets/images/table39.jpg" /></a>
        <a href="#"><img src="assets/images/friend-icon12.png" /></a>
      </div>

    </div>
  </div>

  <footer class=" wow fadeInUp" data-wow-delay="400ms">
    <div class="footer wow fadeInUp" data-wow-delay="400ms">
      <div class="col-md-5 foo_left">
        <p>
          <a href="#"><span data-lang="menu44">公司简介</span></a>
          <a href="#"> <span data-lang="menu45">联系方式</span></a>
          <a href="#"><span data-lang="menu46">人才招聘</span></a>
        </p>
        <p>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1</p>
      </div>
      <div class="col-md-3"></div>
      <div class="col-md-4 foo_right">
        <div>
          <span class="imgspan"><a href="#"><img src="./assets/images/table40.jpg" alt=""></a></span>
          <span class="imgspan"><a href="#"><img src="./assets/images/table41.jpg" alt=""></a></span>
          <span class="imgspan"><a href="#"><img src="./assets/images/table42.jpg" alt=""></a></span>
        </div>
      </div>
      <div class="qrimg1 qrimg"><img src="./assets/images/qrimg1_03.png" alt=""><span></span></div>
      <div class="qrimg2 qrimg"><img src="./assets/images/qrimg1_03.png" alt=""><span></span></div>
      <div class="qrimg3 qrimg"><img src="./assets/images/qrimg1_03.png" alt=""><span></span></div>
    </div>
  </footer>
</body>

</html>
<script src="./assets/js/wow.min.repeat.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>

<script>
  //初始化懒加载插件
  new WOW().init()

  //加入锚点滚动效果
  $(function () {
    // a href == id 
    //锚点跳转滑动效果  获取 a 当中 href="#"  area href="#" 点击事件
    // a href="#list"
    $('a[data-url]').click(function () {
      //是否重复点击自己
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        //利用a链接href属性 来作为名称 去选中 元素中 id相同的元素   href = id
        var $target = $(this.hash);

        $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

        if ($target.length) {
          var targetOffset = $target.offset().top;
          $('html,body').animate({
            scrollTop: targetOffset
          },
            1000);
          return false;
        }
      }
    });
  })
  var videoState = true
  $('#video').click(function () {
    if (videoState) {
      $('video').trigger('play');
      $('video').css('opacity', '1')
      videoState = false
    } else {
      $('video').trigger('pause');
      $('video').css('opacity', '0')
      videoState = true
    }
  })
  // footer
  function QR(q) {
    $('.imgspan').eq(q).hover(function () {
      if (parseInt($('body').css('width')) < 1000) {
        return
      } else {
        $('.qrimg').eq(q).css('transform', 'scale(1)')
        $('.qrimg').eq(q).css('opacity', '1')
        $('.qrimg').eq(q).css('top', '-130px')

      }
    }, function () {
      $('.qrimg').eq(q).css('transform', 'scale(0)')
      $('.qrimg').eq(q).css('opacity', '0')
      $('.qrimg').eq(q).css('top', '-120px')
    })
  }
  QR('0')
  QR('1')
  QR('2')

  //设置默认语言 先要看缓存里面有没有设置
  var current = localStorage.getItem('lang')

  //判断是否存在
  if(!current)
  {
    ///设置一个默认的中文
    localStorage.setItem('lang','zh')
    var current = 'zh'
  }

  //一进来就触发中英文
  SelectLang(current)


  //获取所有的语言项目
  var $langlist = $("*[data-lang]")

  
  //切换中英文
  function SelectLang(lang)
  {
    //设置缓存(当前的语言)
    localStorage.setItem('lang',lang)

    //请求语言项文件
    $.ajax({
      url:`./assets/local/${lang}.json`,
      type:"POST",
      dataType:"json",
      success:function(success)
      {
        $langlist.each(function(){
          var langname = $(this).data("lang")
          var content = success[langname]

          $(this).text(content)
        })
      }
    })
  }

</script>